<template>
  <div>
    <h1>题库管理</h1>
    <el-button type="text" @click="askins()">新增/修改</el-button>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="askId"
        label="问题id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="askTopic"
        label="问题名称"
        width="180">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button @click="askDeleted(scope.row.askId)">删除</el-button>
          <el-button @click="askinst(scope.row.askId)">管理答案</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form :model="tbask" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="请输入问卷id">
          <el-input v-model="tbask.askId"></el-input>
        </el-form-item>
        <el-form-item label="请输入问卷的名字">
          <el-input v-model="tbask.askTopic"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="askUpdate()">修改</el-button>
          <el-button type="primary" @click="askInsert()">新增</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible1"
      width="30%"
      :before-close="handleClose">
      <el-table
        :data="tableData1"
        border
        style="width: 100%">
        <el-table-column
          prop="answerId"
          label="答案id"
          width="180">
        </el-table-column>
        <el-table-column
          prop="answerName"
          label="答案名称"
          width="180">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button @click="answerkDeleted(scope.row.answerId)">删除</el-button>
            <el-button @click="answerkins(scope.row)">修改/新增</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible2"
      width="30%"
      :before-close="handleClose">
      <el-form :model="tbAnswer" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="请输入答案id">
          <el-input v-model="tbAnswer.answerId"></el-input>
        </el-form-item>
        <el-form-item label="请输入答案内容">
          <el-input v-model="tbAnswer.answerName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="answerkUpdate()">修改</el-button>
          <el-button type="primary" @click="answerkInsert()">新增</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {askUpdate,askInsert,askSelect,askDeleted,answerkSelect,answerkDeleted,answerkUpdate,answerkInsert} from '@/api/evaluating'
  export default {
    data() {
      return {
        dialogVisible:false,
        dialogVisible1:false,
        dialogVisible2:false,
        tableData: [],
        tableData1: [],
        tbask:{
          askId:'',
          askTopic:''
        },
        tbAnswer:{
          askId:'',
          answerId:'',
          answerName:''
        }
      }
    },
    mounted(){
      this.askSelect()
    },
    methods:{
      answerkDeleted(row){
        answerkDeleted(row).then((res)=>{
          this.dialogVisible1=false
        })
      },
      answerkInsert(){
        this.tbAnswer.answerId=null
        this.dialogVisible2=false
        answerkInsert(this.tbAnswer).then((res)=>{
          console.log(res.data)
          this.tbAnswer={}
          this.dialogVisible1=false
        })
      },
      answerkUpdate(){
        const l=this.tbAnswer.askId
        this.dialogVisible2=false
        answerkUpdate(this.tbask).then((res)=>{
          console.log(res.data)
          this.tbask=[]
          this.dialogVisible1=false
        })
      },
      answerkins(row){
        this.dialogVisible2=true
        this.tbAnswer=row
      },
      askinst(row){
        this.tbAnswer.askId=row
        this.dialogVisible1=true
        answerkSelect(row).then((res)=>{
         this.tableData1=res.data
        })
      },
      askSelect(){
        askSelect(this.tbask).then((res)=>{
          this.tableData=res.data
        })
      },
      askins(){
        this.dialogVisible=true
      },
      askDeleted(row){
        askDeleted(row).then((res)=>{
          console.log(res.data)
          this.askSelect()
        })
      },
      askInsert(){
        this.tbask.askId=null
        this.dialogVisible=false
        askInsert(this.tbask).then((res)=>{
          console.log(res.data)
          this.tbask=[]
          this.askSelect()
        })
      },
      askUpdate(){
        this.dialogVisible=false
        askUpdate(this.tbask).then((res)=>{
          console.log(res.data)
          this.tbask=[]
          this.askSelect()
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  }
</script>

<style scoped></style>


